<template>
  <div class="main-container">
    <div>
      <h2>用户列表</h2>
    </div>
    <div class="search-container">
      <el-input class="search-input" v-model="searchName" name="searchName" style="width: 160px" placeholder="请输入姓名" />
      <el-button class="search-btn" type="primary" @click="searchBtn" ><span>查询</span></el-button>
      <el-button class="search-btn"  type="primary" @click="reset" ><span>重置</span></el-button>
      <br>
    </div>
    <div>
      <el-table :data="table" border style="width: 100%" @update-item="refresh">
        <el-table-column prop="username" label="姓名" width="180" align="center" />
        <el-table-column prop="birth" label="生日" width="180" align="center"  />
        <el-table-column label="照片" width="180" align="center"  >
          <template #default="scope">
            <el-image style="width: 40px; height: 30px" :src="scope.row.head"
                      fit="cover" :preview-src-list="[scope.row.head]"
                      preview-teleported
            />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center"  />
        <el-table-column label="操作" align="center" >
          <template #default="scope">
            <el-icon><Edit @click="editBtn(scope.row)" /></el-icon>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          :page-sizes="[10, 20, 30, 50]"
          v-model:page-size="pageSize"
          v-model:current-page="currentPage"
          @update:current-page="currentPageBtn"
          @update:page-size="pageSizeBtn"
          layout="sizes, prev, pager, next" :total="total" />
    </div>
  </div>

  <!-- 编辑 -->
  <UserEdit ref="formRef" @submit-success="refresh" />
</template>

<script>
import {onMounted, ref, getCurrentInstance, reactive, toRefs} from "vue"
import {Edit} from "@element-plus/icons-vue";
import UserEdit from "@/components/UserEdit.vue";
export default {
  name: "user",
  components: {UserEdit, Edit},
  setup() {
    const {proxy} = getCurrentInstance()
    let table = [
      // {
      //   username:'张三',
      //   birth:'2016-06-07',
      //   head:'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
      //   address:'厦门'
      // },
      // {
      //   username:'李四',
      //   birth:'2016-06-07',
      //   head:'http://gips1.baidu.com/it/u=3874647369,3220417986&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280',
      //   address:'泉州'
      // },
      // {
      //   username:'王五',
      //   birth:'2016-06-07',
      //   head:'http://gips0.baidu.com/it/u=3560029307,576412274&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
      //   address:'福州'
      // },
      // {
      //   username:'胖虎',
      //   birth:'2016-06-07',
      //   head:'http://gips1.baidu.com/it/u=4237787505,2117628450&fm=3028&app=3028&f=JPEG&fmt=auto?w=1440&h=2560',
      //   address:'莆田'
      // },
    ];
    // const pageSize = ref(10)
    // const currentPage = ref(1)
    const tableData = reactive({
      table,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      searchName: ''
    })

    // 重置
    const reset = ()=> {
      tableData.searchName = ''
      userList()
    }

    // 查询
    const searchBtn = ()=> {
      userList()
      tableData.searchName = ''
    }

    onMounted(() => {
      userList()
    })

    const userList = async () => {
      try {
        const obj = {pageSize: tableData.pageSize, currentPage: tableData.currentPage, username: tableData.searchName};
        const uri = proxy.$urls.m().userPage
        const res = await new proxy.$request(uri, obj).modepost()

        tableData.total = res.data.data.total
        tableData.table = res.data.data.records
      } catch (e) {
        new proxy.$tips(e, 'error').msgBox()
      }
    }

    const currentPageBtn = (e) => {
      tableData.currentPage = e
      userList()
    }

    const pageSizeBtn = (e) => {
      tableData.pageSize = e
      tableData.currentPage = 1
      userList()
    }

    const formRef = ref()

    const editBtn = (val)=> {
      formRef.value.open(val)
    }

    const refresh = ()=> {
      userList()
    }

    return {tableData, ...toRefs(tableData), currentPageBtn, pageSizeBtn, reset, searchBtn, editBtn, formRef, refresh}
  }
}
</script>

<style scoped>
.search-container {
  display: flex; /* 使用Flexbox布局 */
  align-items: center;/* 垂直居中对齐子元素（如果需要的话） */
  //justify-content: space-between; /* 子元素之间的间隔相等，并且第一个元素与容器开始边界有间隔，最后一个元素与容器结束边界有间隔 */
}

.search-input,
.search-btn {
  margin-right: 10px; /* 为每个元素添加右侧外边距，除了最后一个元素 */
}

.search-btn:last-child {
  margin-right: 0; /* 移除最后一个按钮的右侧外边距 */
}
</style>